<template>
	<view class="cateList" >
		<!-- 轮播图 -->
		<view v-if="newCateList">
			<u-swiper indicator previousMargin="30"
                nextMargin="30"
                circular
                :autoplay="false"
                radius="5"
                bgColor="#ffffff" height="190" indicatorMode="dot" :list="newCateList.category.bannerUrlList"></u-swiper>
				
			<!--描述  -->
			<u-divider :text="newCateList.category.frontName"></u-divider>
			
			<!-- 商品列表 -->
		
					<view class="goodsList" >
						
						<view class="goodsItem" v-for="item in newCateList.itemList" :key="item.id" @click="toDetail(item)">
							<image class="goodsList-img" :src="item.primaryPicUrl" mode=""></image>
							<view class="goodsList-desc">
								{{item.name}}
							</view>
							<view class="goodsList-price">
								<text class="new">￥{{item.retailPrice}}.00</text>
								<text class="old">￥{{item.counterPrice}}.00</text>
							</view>
						</view>
					</view>
					
				
		
			
		</view>
		
	</view>
</template>

<script>
	import request from '../../api/index.js';
	export default {
		props:['L1Id'],
		name:"CateList",
		data() {
			return {
				cateList:[]
			};
		},
		mounted() {
			this.getCateList()
		},
		methods:{
			async	getCateList(){
				const res = await request('/getIndexCateList')
				this.cateList = res.indexCateList
			},
			//跳转详情页
			toDetail(item){
				uni.navigateTo({
					url:"../../pages/Detail/Detail?goodsItem="+JSON.stringify(item)
				})
			}
		},
		computed:{
			newCateList(){
				return this.cateList.find((item)=>{
					return item.category.parentId == this.L1Id
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.goodsList{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	background-color: f1f1f1;
	&::after{
		content:'';
		width: 344rpx;
	}
	.goodsItem{
		width:344rpx ;
		background-color: #f5f5f5;
		margin-bottom: 8rpx;
		
	}
	.goodsList-img{
		width: 344rpx;
		height: 450rpx;
		vertical-align: middle;
	}
	.goodsList-desc{
		font-size: 30rpx;
		padding: 0 8rpx;
	}
	.goodsList-price{
		padding: 0 8rpx;
		.new{
			color: #bb2c08;
			font-size: 30rpx;
		}
		.old{
			font-size: 26rpx;
			margin-left: 10rpx;
			text-decoration: line-through;
		}
	}
}
</style>